import AxCard from '@/components/AxBase/AxCard';
import { Row, Col, Icon } from 'antd';
import React from 'react';
import style from '../style.less'
import { AxPanelSumProps } from './data';

export const AxPanelSum: React.FC<AxPanelSumProps> = props => {
    const {
        name,
        greet,
        desc,
        statistics = [],
    } = props;

    return (
        <>
            <AxCard style={{ marginBottom: '15px' }}>
                <Row>
                    <Col span={16}>
                        <p className={style.title_user}>
                            <Icon type="user" className={style.title_instructor} />&nbsp;{greet}<span className={style.instructor}>{name}</span>
                        </p>
                        <p>{desc}</p>
                    </Col>
                    {statistics && statistics.map((m: any, idx: any) => {
                        if (idx > 1) return (<></>);

                        return (
                            <Col span={4}>
                                <div className={style.statistics_box}>
                                    <p>{m.name}</p>
                                    <p className={style.statistics_value}>{m.total}</p>
                                </div>
                            </Col>
                        );
                    })}
                </Row>
            </AxCard>
        </>
    )
}